import { PageContainer, ProTable } from '@ant-design/pro-components';
import { getIssueListApi,editIssueStutasApi ,deleteIssueApi} from "@/services/issue"
import { useState, useEffect ,useRef} from "react";
import TagContainer from "../components/tagContainer"
import { Switch,Popconfirm,Button ,Select,message} from "antd"
import {useNavigate} from 'umi'
import { useDispatch, useSelector } from '@umijs/max';

export default function Issue() {
  const dispatch = useDispatch()
  const {typeList} = useSelector(state=>state.type)
  const navigator= useNavigate()
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(5)
  const tableRef = useRef()
  useEffect(()=>{
    if(typeList.length===0){
      // 请求数据
      dispatch({
        type:'type/_initList'
      })
    }else{
      console.log("已经有数据了,不用请求了")
    }
  },[])
  function handledlePageChange(page, size) {
    console.log(page)
    setCurrent(page);
    setPageSize(size)
    console.log(size)
  }
  const selectOptions = typeList.map((item)=>{
    return {
      label:item.typeName,
      value:item._id
    }
  })
  // 审核状态
  const selectOptions2 = [{
    label:"已通过",
    value:true
  },{
    label:'未通过',
    value:false
  }]
  function toDetail(row){
    const id = row._id;
    navigator(`/issue/${id}`)
  }
  function confirm(row){
    const id = row._id;
    deleteIssueApi(id).then(res=>{
      // 更新视图
      message.success('删除成功')
      tableRef.current.reload();
    })
  }
  function handleStatusChange(val,row){
    console.log(val)
    console.log(row._id)
    editIssueStutasApi(row._id,{
      issueStatus:val
    }).then(()=>{
      // 刷新视图
      message.success('更新成功')
    })
  }
  const columns = [
    {
      title: '序号',
      key: 'number',
      search:false,
      render: (_, rows, index) => {
        // 计算当前序号
        const target = (current - 1) * pageSize + index + 1;
        return (<span>{target}</span>)
      }
    },
    {
      title: '问答标题',
      key: "issueTitle",
      dataIndex: 'issueTitle',
      align: 'center',
      width:'200px',
    },
    {
      align: 'center',
      title: "问答描述",
      key: "issueContent",
      dataIndex: 'issueContent',
      search:false,

      render: (txt, rows) => {
        const reg = /<[\/]?\w+>/g
        let tempStr = txt.replaceAll(reg, '');
        const showText = tempStr.slice(0, 15) + '...'
        return <span>{showText}</span>
      }
    },
    {
      title: '浏览数',
      align: 'center',
      key: "scanNumber",
      dataIndex: 'scanNumber',
      search:false,


    },
    {
      title: '评论数',
      align: 'center',
      key: "commentNumber",
      dataIndex: 'commentNumber',
      search:false,


    }, {
      title: '问题分类',
      align: 'center',
      key: "typeId",
      dataIndex: 'typeId',
      render: (txt) => {
        return <TagContainer typeId={txt} />
      },
      renderFormItem:()=>{
        return <Select options={selectOptions} />
      }
    },
    {
      title: '审核状态',
      align: 'center',
      key: "issueStatus",
      dataIndex: 'issueStatus',
      renderFormItem:()=>{
        return <Select options={selectOptions2}></Select>
      },
      render: (_, rows) => {
        console.log(rows.issueStatus)
        return <Switch size="small" defaultChecked={rows.issueStatus} onChange={(val)=>handleStatusChange(val,rows)} />
      }

    },
    {
      title: '操作',
      align: 'center',
      key: 'options',
      search:false,

      render: (_, rows) => {
        return (<>

          <Button type="link" size="small" onClick={() => { toDetail(rows) }}>
            详情
          </Button>
          <Popconfirm
            title="删除问答"
            description="确定删除当前问答"
            okText="确定"
            cancelText="取消"
            onConfirm={() => {
              confirm(rows);
            }}
          >
            <Button type="link" size="small" >
              删除
            </Button>
          </Popconfirm>
        </>)
      }
    }
  ]
  return (<PageContainer>
    <ProTable
    actionRef={tableRef}
      pagination={{
        defaultPageSize: pageSize,
        onChange: handledlePageChange,
        showSizeChanger: true,
        pageSizeOptions: [5, 7, 10]
      }}
      rowKey={(rows) => { return rows._id }}
      request={async (params) => {
        params.current = current;
        params.pageSize = pageSize;
        const resp = await getIssueListApi(params)
        console.log(resp)
        return {
          data: resp.data.data,
          success: true,
          total: resp.data.count
        }
      }}
      columns={columns}

    />
  </PageContainer>)
}
